#include('head.html', {title : '注册'})
<body class="bg-info dker" style="overflow-y: scroll;" onload="yanzhengma();">
<section id="content" class="m-t-lg wrapper-md animated fadeInDown">
    <div class="container aside-xl">
        <a class="navbar-brand block" href="/signup"><span class="h1 font-bold">注册</span></a>
        <section class="m-b-lg">
            <header class="wrapper text-center">
                <strong>加入我们&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;皖西学院软件开发创客实验室</strong>
            </header>
            <style type="text/css">
                . {
                    width:800px;
                    font-family:'黑体';
                    margin:50px auto;
                }
                .userName{
                    width:200px;
                    height:40px;
                    line-height:40px;
                    border:1px solid #ffffff;
                }
                .default{
                    width:200px;
                    height:32px;
                    line-height:32px;
                    color: #ffffff;
                }
                .error{
                    height:32px;
                    line-height:32px;
                    color:#F00;
                }
                .success{
                    height:32px;
                    line-height:32px;
                    color: #ffffff;
                }
            </style>
            #if(register.r_flag==1)
            <script type="text/javascript">
                function checkUserName(){
                    var username = document.getElementById('userName');
                    var errname = document.getElementById('nameErr');
                    var pattern = /^[\u4E00-\u9FA5]{2,5}$/;  //用户名格式正则表达式：用户名要至少2-5位汉字
                    if(username.value.length == 0){
                        errname.innerHTML="姓名不能为空";
                        errname.className="error";
                        return false;
                    }
                    if(!pattern.test(username.value)){
                        errname.innerHTML="姓名不合规范（2-5汉字）";
                        errname.className="error";
                        return false;
                    }
                    else{
                        errname.innerHTML="OK";
                        errname.className="success";
                        return true;
                    }
                }
                //验证密码
                function checkPassword(){
                    var userpasswd = document.getElementById('userPasword').value;
                    var reg = /^.*[~!@#\$%\^&\*\(\)_+\-=\[\]\{\}\\\|\'\";:,\<\.\>\/\?\s+].*$/;
                    var regNumber = /\d+/; //验证0-9的任意数字最少出现1次。
                    var regString = /[a-zA-Z]+/; //验证大小写26个字母任意字母最少出现1次。
                    if(userpasswd.length == 0){
                        document.getElementById('passwordErr').innerHTML="密码不能为空";
                        document.getElementById('passwordErr').className="error";
                        return false;
                    }
                    else if(userpasswd.length<6){
                        document.getElementById('passwordErr').innerHTML="密码长度要大于6个字符";
                        document.getElementById('passwordErr').className="error";
                        return false;
                    }
                    else if(!(regNumber.test(userpasswd) && regString.test(userpasswd) || reg.test(userpasswd))){
                        document.getElementById('passwordErr').className="error";
                        document.getElementById('passwordErr').innerHTML="密码中要包含字符串、数字可包含特殊符号！";
                        return false;
                    }
                    else{
                        document.getElementById('passwordErr').className="success";
                        document.getElementById('passwordErr').innerHTML="正确";
                        return true;
                    }
                }

                //确认密码
                function ConfirmPassword(){
                    var userpasswd = document.getElementById('userPasword');
                    var userConPassword = document.getElementById('userConfirmPasword');
                    var errConPasswd = document.getElementById('conPasswordErr');
                    if((userpasswd.value)!=(userConPassword.value) || userConPassword.value.length == 0){
                        errConPasswd.innerHTML="上下密码不一致";
                        errConPasswd.className="error";
                        return false;
                    }
                    else{
                        errConPasswd.innerHTML="OK";
                        errConPasswd.className="success";
                        return true;
                    }
                }
                //验证邮箱
                function  checkEmail() {
                    var a=document.getElementById('youxiang').value;
                    var re = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                    if(!re.test(a)){
                        document.getElementById('yx').className="error";
                        document.getElementById('yx').innerHTML="邮箱输入有误";
                        return false;
                    }
                    else{
                        $.ajax({
                            url : "/checkEmail",
                            data : {"email" : $('#youxiang').val()},
                            success : function (result) {
                                if (result.flag == 1) {
                                    document.getElementById('yx').className = "success";
                                    document.getElementById('yx').innerHTML = result.message;
                                    return true;
                                }
                                else {
                                    document.getElementById('yx').className = "error";
                                    document.getElementById('yx').innerHTML = result.message;
                                    return true;
                                }
                            }
                        })
                        return true;
                    }
                }
            </script>

            <form action="/signup" method="post" name="myform">
                <div class="form-group">
                    <input placeholder="姓名" name="realname" id="userName" onBlur="checkUserName()" oninput="checkUserName()" class="form-control rounded input-lg text-center no-border">
                    <span class="default" id="nameErr">请输入姓名</span>
                </div>
                <div class="form-group">
                    <input type="email" placeholder="邮箱" name="email" id="youxiang" onBlur="checkEmail()" oninput="checkEmail()" class="form-control rounded input-lg text-center no-border">
                    <span class="default" id="yx">请输入邮箱</span>
                </div>
                <div class="input-group form-group">
                    <input type="text" name="yzm" placeholder="验证码" id="yzm" class="form-control rounded input-lg text-center no-border">
                    <span class="input-group-addon" id="vcode"  style="border-bottom-right-radius: 50px;border-top-right-radius: 50px;"><img src="/static/images/yzm.jpg" id="yanzhengma" ></span>
                    <span class="default" ></span>
                </div><span class="default" >请输入验证码</span>

                <div class="input-group form-group">
                    <input type="text" name="yzm" placeholder="邮箱验证码" id="ecode" class="form-control rounded input-lg text-center no-border">
                    <span class="input-group-addon"  style="border-bottom-right-radius: 50px;border-top-right-radius: 50px;"><button id="emailcode" type="button" class="btn btn-default" style="font-size: 12px;">发送邮箱验证码</button></span>
                    <span class="default" ></span>
                </div><span class="default" >请输入邮箱验证码</span>
                <div class="form-group">
                    <input type="password" placeholder="密码" name="password" id="userPasword" onBlur="checkPassword()" oninput="checkPassword()" class="form-control rounded input-lg text-center no-border">
                    <span class="default" id="passwordErr" id="passwordErr">请输入密码</span>
                </div>
                <div class="form-group">
                    <input type="password" placeholder="确认密码" id="userConfirmPasword" onBlur="ConfirmPassword()" oninput="ConfirmPassword()" class="form-control rounded input-lg text-center no-border">
                    <span class="default" id="conPasswordErr">请再输入一遍密码</span>
                </div>
                <div class="checkbox i-checks m-b">
                    <label class="m-l">
                        <input type="checkbox" checked=""><i></i> 同意 <a href="#">创客实验室成员管理条例</a>
                    </label>
                </div>
                <button type="button" class="btn btn-lg btn-warning lt b-white b-2x btn-block btn-rounded"><i class="icon-arrow-right pull-right"></i><span class="m-r-n-lg">注册</span></button>
                #else
                <button type="button" class="btn btn-lg btn-info lt b-white b-2x btn-block btn-rounded disable" style="background: rgb(46, 160, 182);" onclick="javascirpt:alert('抱歉！注册功能暂不开放。');"><i class="fa fa-warning (alias) pull-right"></i><span class="m-r-n-lg">注册未开放</span></button>
                #end
                <div class="line line-dashed"></div>
                <p class="text-muted text-center"><small>已经有了账号 ?</small></p>
                <a href="/signin" class="btn btn-lg btn-info btn-block btn-rounded">登录</a>
            </form>
        </section>
    </div>
</section>
<!-- footer -->
#include('footer.html')
#include('js.html')
<script>

  $(".btn-rounded").click(function(){
      if(checkUserName()&&checkEmail()&&checkPassword()&&ConfirmPassword()){

          $.post("/signup", {
              realname : $("#userName").val(),
              email : $("#youxiang").val(),
              vcode : $("#yzm").val(),
              ecode : $("#ecode").val(),
              password : $("#userPasword").val()
          }, function (data, status) {
              if (data.flag == 1) {
                  alert(data.message);
                  window.location = "/wanshan/"+data.uid;
              } else {
                  alert(data.message);
              }
          })
      }
  });

  function yanzhengma() {
      $.ajax({
          url: "/vcode",
          success : function (result) {
              $("#yanzhengma").attr("src", "/static/images/yzm.jpg"+"?temp=" + Math.random());
          }
      })
  }

  var InterValObj; //timer变量，控制时间
  var count = 30; //间隔函数，1秒执行
  var curCount;//当前剩余秒数
  $("#vcode").click(function () {
      $.ajax({
          url: "/vcode",
          success : function (result) {
              $("#yanzhengma").attr("src", "/static/images/yzm.jpg"+"?temp=" + Math.random());
          }
      })
  })

    $('#emailcode').click(function () {
        if ($('#youxiang').val() == "") {
            alert("请先输入邮箱。");
            return false;
        }
        if ($('#yzm').val() == "") {
            alert("请先输入图片验证码。");
            return false;
        }
        $.ajax({
            url : "/ecode",
            data : {email : $('#youxiang').val(), vcode : $('#yzm').val()},
            success : function (result) {
                alert(result.message);
                if(result.flag==1){
                    curCount = count;
                    $("#emailcode").attr("disabled", "true");
                    $("#emailcode").html(curCount + "秒后可重新发送");
                    InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
                }
                else{
                    $("#vcode").click();
                }
            },
            error : function(){
                alert("系统繁忙！");
            }
        })

    })

  //timer处理函数
  function SetRemainTime() {
      if (curCount == 0) {
          window.clearInterval(InterValObj);//停止计时器
          $("#emailcode").removeAttr("disabled");//启用按钮
          $("#emailcode").html("重新发送验证码");
      }
      else {
          curCount--;
          $("#emailcode").html(curCount + "秒后可重新发送");
      }
  }
</script>
</body>
</html>